const merge = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const TerserPlugin = require("terser-webpack-plugin")
const MIniCssExtractPlugin = require('mini-css-extract-plugin') //用来抽离单独抽离css文件
const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default //抽离的css样式文件按大小分包
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') //压缩css插件
const common = require('./webpack.common')

module.exports = merge(common, {
  mode: 'production',
  output: {
      filename: '[name]-[contenthash:8].js'
  },
  module: {
      rules: [
        {
          test: /\.(css|less)$/,
          use: [
            MIniCssExtractPlugin.loader,
            'css-loader',
            'less-loader'
          ]
        }
      ]
  },
  optimization: {
    splitChunks: {
      // 自动提取所有公共模块到单独文件
      name: 'vendors',
      chunks: 'all'
    }
  },
  plugins: [
    new MIniCssExtractPlugin({     // 抽离css样式插件
      filename: '[name].[hash:8].css',    // 抽离后的文件名
    }),
    new OptimizeCssAssetsPlugin(),
    new CSSSplitWebpackPlugin({ //抽离的css样式文件按20KB分包
        size: 200,
        filename: 'css/[name]-[part].[ext]'
    }),
    new TerserPlugin({
      terserOptions: {
        warnings: false,
        compress: {
          pure_funcs: ["console.log"]
        }
      },
      cache:  true,
      parallel: true,
      extractComments: false
    }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin(['public'])
  ]
})